<#assign base=request.contextPath /> 
<!DOCTYPE html>


<html>
<head>


<!-- bootstrap css-->
<link href="${base}/web/listbox/css/bootstrap.min.css"  rel="stylesheet" media="screen">

<!-- 设置该iframe中的背景色 与父页面一致-->
<style type="text/css" >
body { background:#f5f5f5  }
</style>
</head>
<body >


<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">
          <h3 class="panel-title">
			 组
          </h3>
   </div>
   
   <div class="panel-body">
   

      <button type="button"  class="btn btn-info  create">
      	<i class=" glyphicon glyphicon-plus"></i> 
      	创建组
      </button>

		
      
<hr>
    <div id="groups" class="list-group" >
	  <#list data  as item>
      <a class="list-group-item">	
      <div class="btn-group pull-right">
              <button type="button" id="${item.id }" class="remove btn btn-info" title="删除该组">
              <i  class="glyphicon glyphicon-remove"></i>
              </button>
              <button type="button" title="发送消息" class="btn btn-info">
              <i class="glyphicon glyphicon-comment"></i>
              </button>
      </div>
      <h4 class="list-group-item-heading">
				${item.name}(创建时间: ${item.ctime})
      </h4>
      <p style="width:500px" class="list-group-item-text">
				${item.description}
      </p>
   	  </a>
 	  </#list >
   
	</div>
	<ul class="pager">
		   <li>
		       		<a>没有前一页</a>		
		      </li>
		      <li>
		      	<#if next != -2>
		     	 	<a class="index/${next}" href="javascript:;">后一页</a>
		      	<#else>
		     	 	<a>没有后一页</a>
		      	</#if>
		      </li>
    	</ul> 
   </div>
</div>
</div>




<!-- bootstrap js -->
<script src="${base}/web/vendors/jquery-1.9.1.min.js"> </script> 
<script src="${base}/web/listbox/js/bootstrap.min.js"></script>

<!-- layer.js -->
<script src="${base}/web/layer/layer.js"></script>
	
<script>	
var  groups = $("#groups");
var $ppager = $(".pager li a").eq(0),
	 $npager = $(".pager li a").eq(1);


$(".remove").on("click",function(){
	var id = $(this).attr("id");
	layer.confirm('确定要删除该组吗?', {
    		btn: ['确定','否'], //按钮
			shade:0.01
			
			}, 
			
			function(index){
			
			var url = "action/remove/"+id;
			$.get(url,{},function(res){
				
				
				if(res.status == undefined )
				//刷新页面, js 
				window.location.reload();
				else if(res.status == 'error')
				layer.msg('删除失败');
			
			})
			
			layer.close(index);
			},
			function(){
			});
    });
		
			function pager(){
				if($(this).attr("class") != undefined){
				$.get($(this).attr("class"),{},handler);
				}
			}
			$ppager.on("click",pager);
			$npager.on("click",pager);
			
			function handler(data) {
			//清除#groups
			groups.empty();
		
			$.each(data.data, function(index, value) {
			   var ee="<a class='list-group-item'><div class='btn-group pull-right'>"
              		  +" <button type='button' id='"+value.id+"' class='remove btn btn-info' title='删除该组'> "
              		  +" <i  class='glyphicon glyphicon-remove'></i> </button>"
             		  +" <button type='button' title='发送消息' class='btn btn-info'>"
             		  +" <i class='glyphicon glyphicon-comment'></i></button></div><h4 class='list-group-item-heading'>"
			 		  +value.name+"(创建时间:"+value.ctime+") </h4> <p style='width:500px' class='list-group-item-text'>"
							+value.description
      					 +"</p></a>";
						
					groups.append(ee);
				});
				
						
				$(".remove").on("click",function(){
				var id = $(this).attr("id");
				layer.confirm('确定要删除该组吗?', {
			    		btn: ['确定','否'], //按钮
						shade:0.01
						
						}, 
						
						function(index){
						
						var url = "action/remove/"+id;
						$.get(url,{},function(res){
							
							
							if(res.status == undefined )
							//刷新页面, js 
							window.location.reload();
							else if(res.status == 'error')
							layer.msg('删除失败');
						
						})
						
						layer.close(index);
						},
						function(){
						});
			    	});		
				
		
				
				if(data.pre != -1) {
					$ppager.attr("class","index"+"/"+ data.pre);
					$ppager.attr("href","javascript:;");
					$ppager.html("前一页");
					}
				else{
					$ppager.html("没有前一页");
					$ppager.removeAttr("class");
					$ppager.removeAttr("href");
				}
				if(data.next != -2) {
					$npager.html("下一页");
					$npager.attr("href","javascript:;");
					$npager.attr("class","index"+"/"+data.next);
				}		
				else{
					$npager.html("没有下一页");
					$npager.removeAttr("class");
					$npager.removeAttr("href");
			
				}
			}
		
	
		
		
		
		
		
		
	$(".create").on("click",function(){ 
	
		location.href ="../../web/wizard/index?f="+window.location.href
	});
</script>
</body>
</html>